import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

// 创建仓库的实例
const store = new Vuex.Store({
  // state对象里面写的就是全部的全局的变量
  state: {
    count: 10,
    name: "zhangsan",
    age: 20,
    address: "九堡",
    list: [1, 2, 3, 4, 5, 6, 7, 8],
  },

  // mutations对象里面是放函数的
  // mutations是唯一可以去改变state的地方
  // Mutation 必须是同步函数,(开发工具的记录是在mutation函数触发的时候生成的，而不是在数据改变的时候生成)
  mutations: {
    add(state, payload) {
      // state.count++;
      // setTimeout(() => {
      state.count += payload.num;
      // }, 1000);
    },
    minus(state, payload) {
      state.count -= payload.num;
    },
  },

  // actions里面也是函数，不能去改变state的，只能去提交mutations
  // 一般写的就是异步函数
  actions: {
    addAsync({ commit }, payload) {
      setTimeout(() => {
        // console.log(context);
        commit("add", payload);
      }, 2000);
    },
  },

  // 相当于vuex里面的计算属性
  // getters是可以依赖于state的变量，同时也可以依赖于其他的getters
  getters: {
    oddList(state) {
      return state.list.filter((item) => item % 2);
    },
  },
});

export default store;
